<script setup>
import { reactive, ref } from 'vue';
import Son from './Son.vue';

// 父传子(父组件把要传递的值绑定到子组件的属性上, 子组件使用defineProps定义接收父组件的哪些属性)
// 单向数据流(父组件值改变, 子组件的值跟着改变, 子组件不能修改传递过来的值)
const money = ref(100);
const books = ref(["西游记", "水浒传"]);

const data = reactive({
  money: 200,
  books: ["三国演义", "红楼梦"]
});

function moneyMinus(arg) {
  console.log("父组件接收到子组件传递过来的值 arg: ", arg);
  data.money += arg;
}
</script>

<template>
<div style="background-color: #999">
  <h2>Father</h2>
  <!-- <button @click="money+=10">充值</button> -->
  <!-- <Son :money="money" :books="books" /> -->

  <!-- <button @click="data.money+=10">充值</button> -->
  <!-- <Son :money="data.money" :books="data.books" /> -->

  <!-- 批量绑定 -->
  <button @click="data.money+=10">充值</button>
  <Son v-bind="data" @buy="moneyMinus" />

  <!-- 插槽 -->
  <Son v-bind="data" @buy="moneyMinus">
    <!-- 默认插槽 -->
    <!-- <button>返回</button> -->

    <!-- 具名插槽 -->
    <template v-slot:center>
      <button>标题</button>
    </template>
    <!-- v-slot:right 简写 #right -->
    <template #right>
      <button>搜索</button>
    </template>

    <!-- 作用域插槽 -->
    <!-- 
    <template v-slot:default="data">
      <p>用户名: {{data.user.name}}</p>
      <p>年龄: {{data.user.age}}</p>
    </template>
    -->

    <!-- 
    <template v-slot:default="{user}">
      <p>用户名: {{user.name}}</p>
      <p>年龄: {{user.age}}</p>
    </template>
    -->

    <template v-slot="{user}">
      <p>用户名: {{user.name}}</p>
      <p>年龄: {{user.age}}</p>
    </template>
  </Son>
</div>
</template>

<style scoped>

</style>